<div class="us-check backlog-us">
    <input type="checkbox" ng-model="us.selected" ng-change="blCtrl.changeUserStoriesSelection()"></input>
</div>
<div class="us-icon sprint-us">
    <div data-icon="I" ng-show="us.is_closed"></div>
    <div data-icon="q" ng-show="!us.is_closed"></div>
</div>
<div class="us-title">
    <div class="title">
        <span data-icon="J" class="icon" ng-show="us.client_requirement"></span>
        <span data-icon="N" class="icon" ng-show="us.team_requirement"></span>

        <span data-icon="o" class="icon blocked sprint-us" ng-show="us.is_blocked"
              gm-markdown-preview-popover=""
              gm-popover-model="us.blocked_note"
              gm-popover-class-name="us-blocked-popover"
              gm-popover-title="backlog.blocking-reasons-popover">
        </span>

        <a href="{{ urls.userStoryUrl(projectSlug, us.ref, false, blCtrl.getUserStoryQueryParams()) }}"
           class="backlog-us">
            #{{ us.ref }} {{ us.subject }}
        </a>
        <span class="sprint-us">#{{ us.ref }} {{ us.subject }}</span>
    </div>
    <div class="tags" ng-hide="!showTags">
        <span ng-repeat="tag in us.tags track by $index" class="label" gm-colorize-tag="tag">{{ tag }}</span>
    </div>
</div>
<div class="us-points sprint-us">{{ us.total_points }}</div>
<div class="us-status backlog-us">
    <div class="label"
         gm-generic-choice-popover="blCtrl.saveUsStatus(us, selectedId)"
         gm-popover-class-name="us-status-popover"
         gm-popover-color-enabled="true"
         gm-popover-model="constants.usStatusesList"
         style="background-color: {{ constants.usStatuses[us.status].color }}">
        {{ constants.usStatuses[us.status].name }}</div>

    <span data-icon="o" class="icon blocked" ng-show="us.is_blocked"
          gm-markdown-preview-popover=""
          gm-popover-model="us.blocked_note"
          gm-popover-class-name="us-blocked-popover"
          gm-popover-title="backlog.blocking-reasons-popover">
    </span>
</div>
<div class="us-points backlog-us">
    <div ng-repeat="role in constants.computableRolesList" class="role-point"
         gm-generic-choice-popover="blCtrl.saveUsPoints(us, role, selectedId)"
         gm-popover-model="constants.pointsList"
         gm-popover-class-name="us-points-popover">
        {{ constants.points[us.points[role.id]].name }}
    </div>
    <div class="role-point total">
        {{ us.total_points }}
    </div>
</div>
<div class="us-options extra-options backlog-us">
    <a class="btn-small-preview option" data-icon="l"
       gm-template-popover="us-preview-popover"
       gm-popover-model="us">
        <!-- TODO: Review this spanish translation, used Resumen because the Previsualizar was too long -->
        <span class="help-box" i18next="backlog.preview">Preview</span>
    </a>
    <a class="btn-small-edit option" data-icon="j" ng-click="blCtrl.openEditUserStoryForm(us)">
        <span class="help-box" i18next="backlog.edit">Edit</span>
    </a>
    <a class="btn-small-remove option" data-icon="h"
       gm-generic-dialog-popover="blCtrl.removeUs(us)"
       gm-popover-model="us"
       gm-popover-title-bind="'backlog.us-delete-sure'|i18next:{subject: us.subject}">
        <span class="help-box" i18next="backlog.remove">Remove</span>
    </a>
</div>
<div class="veil" ng-show="us._moving">
    <span ng-class="{spinner: us._moving}" data-icon="x"></span>
</div>
